<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防抖</title>
</head>
<body>
<button id="debounce">点我防抖！</button>

<script>
    let onload = function () {
        // 1、获取这个按钮，并绑定事件
        let myDebounce = document.getElementById("debounce");
        myDebounce.addEventListener("click", debounce(sayDebounce));
    }

    // 2、防抖功能函数，接受传参
    function debounce(fn) {
        // 4、创建一个标记用来存放定时器的返回值
        let timeout = null;
        return function () {
            // 5、每次当用户点击/输入的时候，把前一个定时器清除
            clearTimeout(timeout);
            // 6、然后创建一个新的 setTimeout，
            // 这样就能保证点击按钮后的 interval 间隔内
            // 如果用户还点击了的话，就不会执行 fn 函数
            timeout = setTimeout(() => {
                fn.call(this, arguments);
            }, 1000);
        };
    }

    // 3、需要进行防抖的事件处理
    function sayDebounce() {
        // ... 有些需要防抖的工作，在这里执行

        console.log("防抖成功！", new Date());
    }



</script>
</body>
</html>